{% extends "base.html" %}

{% block title %}视频归档 - Camera Pi{% endblock %}

{% block sidebar %}
<div class="list-group list-group-flush">
    <a href="/manage/archive" class="list-group-item list-group-item-action active">
        <i class="bi bi-archive"></i> 视频归档管理
    </a>
    <a href="/manage/alert" class="list-group-item list-group-item-action">
        <i class="bi bi-bell"></i> 报警设置
    </a>
    <a href="/manage/user" class="list-group-item list-group-item-action">
        <i class="bi bi-person"></i> 用户信息
    </a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-4">
            <h2><i class="bi bi-archive"></i> 视频归档管理</h2>
            <p class="lead">管理历史视频和照片</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="date" class="form-control" id="archiveDate">
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="archiveType">
                                <option value="all">所有类型</option>
                                <option value="video">视频</option>
                                <option value="photo">照片</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-primary" onclick="searchArchives()">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                        <div class="col-md-3 text-end">
                            <button class="btn btn-success" onclick="exportArchives()">
                                <i class="bi bi-download"></i> 导出
                            </button>
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="form-check-input" id="selectAll">
                                    </th>
                                    <th>文件名</th>
                                    <th>类型</th>
                                    <th>大小</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="archiveList">
                                <!-- 这里将通过JavaScript动态加载归档文件 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div>
                            <button class="btn btn-danger" onclick="deleteSelected()">
                                <i class="bi bi-trash"></i> 删除选中
                            </button>
                        </div>
                        <nav>
                            <ul class="pagination mb-0">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title"><i class="bi bi-pie-chart"></i> 存储统计</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">视频文件</h6>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 60%">60%</div>
                                    </div>
                                    <small class="text-muted">已使用 60GB / 100GB</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">照片文件</h6>
                                    <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 30%">30%</div>
                                    </div>
                                    <small class="text-muted">已使用 30GB / 100GB</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">其他文件</h6>
                                    <div class="progress">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 10%">10%</div>
                                    </div>
                                    <small class="text-muted">已使用 10GB / 100GB</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function searchArchives() {
    const date = document.getElementById('archiveDate').value;
    const type = document.getElementById('archiveType').value;
    // 实现搜索功能
}

function exportArchives() {
    // 实现导出功能
}

function deleteSelected() {
    // 实现删除功能
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面
});
</script>
{% endblock %} 